<template>
  <div class="monitor-filter">
    <!-- 详细筛选条件 -->
    <el-card class="filter-card" v-show="showSearch">
      <el-form :model="localQueryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="设备选择">
          <el-select
            v-model="localQueryParams.deviceId"
            placeholder="请选择设备"
            clearable
            filterable
            style="width: 200px">
            <el-option
              v-for="device in deviceList"
              :key="device.deviceId"
              :label="`${device.deviceName} (${device.deviceCode})`"
              :value="device.deviceId">
              <span style="float: left">{{ device.deviceName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ device.deviceCode }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="能耗类型">
          <el-select v-model="localQueryParams.energyType" placeholder="请选择能耗类型" clearable style="width: 150px">
            <el-option label="电力" value="electric"></el-option>
            <el-option label="燃气" value="gas"></el-option>
            <el-option label="水" value="water"></el-option>
            <el-option label="蒸汽" value="steam"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="localDateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            style="width: 350px">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i class="el-icon-search"></i>
            查询
          </el-button>
          <el-button @click="handleReset">
            <i class="el-icon-refresh"></i>
            重置
          </el-button>
          <el-button type="text" @click="toggleSearch">
            <i class="el-icon-arrow-up"></i>
            收起
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 快速筛选按钮 -->
    <div class="quick-filter" v-show="!showSearch">
      <el-button size="mini" @click="toggleSearch">
        <i class="el-icon-search"></i>
        展开筛选
      </el-button>
      <el-button-group class="time-filter">
        <el-button
          size="mini"
          :type="timeFilter === 'realtime' ? 'primary' : 'default'"
          @click="setTimeFilter('realtime')">实时</el-button>
        <el-button
          size="mini"
          :type="timeFilter === '1h' ? 'primary' : 'default'"
          @click="setTimeFilter('1h')">1小时</el-button>
        <el-button
          size="mini"
          :type="timeFilter === '6h' ? 'primary' : 'default'"
          @click="setTimeFilter('6h')">6小时</el-button>
        <el-button
          size="mini"
          :type="timeFilter === '24h' ? 'primary' : 'default'"
          @click="setTimeFilter('24h')">24小时</el-button>
        <el-button
          size="mini"
          :type="timeFilter === '7d' ? 'primary' : 'default'"
          @click="setTimeFilter('7d')">7天</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "MonitorFilter",
  props: {
    deviceList: {
      type: Array,
      default: () => []
    },
    queryParams: {
      type: Object,
      default: () => ({
        deviceId: null,
        energyType: null
      })
    },
    dateRange: {
      type: Array,
      default: () => []
    },
    timeFilter: {
      type: String,
      default: 'realtime'
    }
  },
  data() {
    return {
      showSearch: false,
      localQueryParams: {},
      localDateRange: []
    };
  },
  watch: {
    queryParams: {
      handler(newVal) {
        this.localQueryParams = { ...newVal };
      },
      deep: true,
      immediate: true
    },
    dateRange: {
      handler(newVal) {
        this.localDateRange = [...newVal];
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    toggleSearch() {
      this.showSearch = !this.showSearch;
    },
    handleQuery() {
      this.$emit('query', {
        queryParams: this.localQueryParams,
        dateRange: this.localDateRange
      });
    },
    handleReset() {
      this.localQueryParams = {
        deviceId: null,
        energyType: null
      };
      this.localDateRange = [];
      this.$refs.queryForm.resetFields();
      this.$emit('reset');
    },
    setTimeFilter(filter) {
      this.$emit('time-filter-change', filter);
    }
  }
};
</script>

<style lang="scss" scoped>
.monitor-filter {
  margin-bottom: 16px;
}

.filter-card {
  margin-bottom: 16px;

  ::v-deep .el-card__body {
    padding: 16px 20px;
  }

  .el-form-item {
    margin-bottom: 0;
  }
}

.quick-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  .time-filter {
    .el-button {
      border-radius: 4px;

      &:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      &:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .quick-filter {
    flex-direction: column;
    gap: 12px;
  }
}
</style>
